/**
 * React渲染器工具
 * 用于将React组件挂载到页面上
 */
import React from 'react';
import ReactDOM from 'react-dom/client';
import { logger } from './logger';

/**
 * 在页面上创建一个挂载点并渲染React组件
 * @param Component 要渲染的React组件
 * @param props 组件的属性
 * @param containerId 挂载点的ID
 * @returns 渲染的DOM元素
 */
export const renderReactComponent = <P extends object>(
  Component: React.ComponentType<P>,
  props: P,
  containerId: string = 'nav-links-react-root'
): HTMLElement => {
  logger.info('渲染React组件', { Component, containerId });
  
  // 查找现有挂载点或创建新的
  let container = document.getElementById(containerId);
  if (!container) {
    container = document.createElement('div');
    container.id = containerId;
    document.body.appendChild(container);
    logger.debug('创建新的React挂载点', container);
  } else {
    logger.debug('使用现有的React挂载点', container);
    // 确保容器是空的
    ReactDOM.createRoot(container).unmount();
  }
  
  // 创建React根并渲染组件
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(Component, props));
  
  return container;
};

/**
 * 卸载React组件并删除挂载点
 * @param containerId 挂载点的ID
 */
export const unmountReactComponent = (containerId: string = 'nav-links-react-root'): void => {
  logger.info('卸载React组件', { containerId });
  
  const container = document.getElementById(containerId);
  if (container) {
    ReactDOM.createRoot(container).unmount();
    container.remove();
    logger.debug('删除React挂载点', container);
  }
}; 